<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  
  <title>Document</title>

  <link rel="stylesheet" href="./demo.css">
</head>
<body>
  <div class="box">
    <div>
        <h2>模式一:基础tab点击切换</h2>
        <div style="width: 500px;margin-top: 30px;">
            <div class="div">
                <ul id="tabClick"></ul>
                <div id="content">
                    <div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                    </div>
                    <div>
                        <div>222</div>
                        <div>111</div>
                        <div>111</div>
                    </div>
                    <div>333</div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="box">
    <div>
        <h2>模式二:点击过渡滑动切换动画</h2>
        <div style="width: 500px;margin-top: 30px;">
            <div class="div">
                <ul id="tabClick1"></ul>
                <div id="content1">
                    <div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                    </div>
                    <div>
                        <div>222</div>
                        <div>111</div>
                    </div>
                    <div>333</div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="box">
    <div>
        <h2>模式三:1.滑动底部加载更多触发回调函数，2.点击选项卡触发回调函数</h2>
        <div style="width: 500px;margin-top: 30px; margin-left: auto;margin-right: auto;">
            <div class="div">
                <ul id="tabClick2"></ul>
                <div id="content2">
                    <div id="tab1">
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div style="text-align: center;margin-bottom: 20px;">上拉加载更多</div>
                    </div>
                    <div>
                        <div>222</div>
  
                    </div>
                    <div>333</div>
                </div>
            </div>
        </div>
    </div>
  </div>
  
  <div class="box">
    <div>
        <h2>模式四:自动切换tab，设置时间</h2>
        <div style="width: 500px;margin-top: 30px; margin-left: auto;margin-right: auto;">
            <div class="div">
                <ul id="tabClick3"></ul>
                <div id="content3">
                    <div id="oop">
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
                        <div>111</div>
  
                    </div>
                    <div>
                        <div>222</div>
  
                    </div>
                    <div>333</div>
                </div>
            </div>
        </div>
    </div>
  </div>


  <script src="./demo.js"></script>
</body>
</html>